<template>
  <section class="page-container">
    <section class="info">
      <el-divider content-position="left">
        可拖拽组件
      </el-divider>
      <p>
        <span>通常用于首次进入app应用的功能介绍、组件交互、用户注意力转移等场景，基于功能强大的JavaScript 拖拽库SortableJS开发。 </span>
      </p>

      <p class="mt-20">
        中文文档官网：
        <el-link
          href="http://www.sortablejs.com/index.html"
          type="primary"
          target="_blank"
        >
          SortableJS
        </el-link>
      </p>
    </section>

    <el-row
      class="mt-20"
      :gutter="20"
    >
      <el-col
        :xs="24"
        :md="8"
      >
        <section class="task">
          <h5 class="task-header">
            开发中({{ todoListIds.length }})
          </h5>
          <ul
            id="Todo"
            ref="todoRef"
            class="task-list"
            row-key="id"
          >
            <template v-if="todoList.length">
              <li
                v-for="item in todoList"
                :key="item.id"
                class="task-list__item"
                :data-id="item.id"
              >
                <section class="flex top-wrap">
                  <span
                    :class="[
                      'badge',
                      item.badge
                    ]"
                  >
                    {{ item.badge }}
                  </span>
                  <span class="text-muted">{{ item.date }} </span>
                </section>

                <p class="mt-8">
                  <span>内容描述：</span>
                  {{ item.title }}
                </p>
                <ul class="mt-8 flex space-between">
                  <li>
                    <span>所需时间：</span>
                    {{ item.priority }} 天
                  </li>
                  <li>
                    <span>Owner：</span>
                    {{ item.name }}
                  </li>
                </ul>
                <p class="mt-8">
                  <span>提测时间：</span>
                  {{ item.qaDate }}
                </p>
              </li>
            </template>
          </ul>

          <p class="task-id-info">
            开发中的ID排序情况：{{ todoListIds }}
          </p>
        </section>
      </el-col>
      <el-col
        :xs="24"
        :md="8"
      >
        <section class="task">
          <h5 class="task-header">
            已完成({{ completedListIds.length }})
          </h5>
          <ul
            id="Completed"
            ref="completedRef"
            class="task-list"
            row-key="id"
          >
            <template v-if="completedList.length">
              <li
                v-for="item of completedList"
                :key="item.id"
                class="task-list__item"
                :data-id="item.id"
              >
                <section class="flex top-wrap">
                  <span
                    :class="[
                      'badge',
                      item.badge
                    ]"
                  >
                    {{ item.badge }}
                  </span>
                  <span class="text-muted">{{ item.date }} </span>
                </section>

                <p class="mt-8">
                  <span>内容描述：</span>
                  {{ item.title }}
                </p>
                <ul class="mt-8 flex space-between">
                  <li>
                    <span>所需时间：</span>
                    {{ item.priority }} 天
                  </li>
                  <li>
                    <span>Owner：</span>
                    {{ item.name }}
                  </li>
                </ul>
                <p class="mt-8">
                  <span>提测时间：</span>
                  {{ item.qaDate }}
                </p>
              </li>
            </template>
          </ul>

          <p class="task-id-info">
            已完成的ID排序情况：{{ completedListIds }}
          </p>
        </section>
      </el-col>
      <el-col
        :xs="24"
        :md="8"
      >
        <section class="task">
          <h5 class="task-header">
            活动列表重新排列场景
          </h5>
          <ul
            ref="activityItemsRef"
            class="task-list"
          >
            <li
              v-for="item in activityList"
              :key="item.id"
              :class="[
                'external-events',
                item.classNames
              ]"
            >
              <i class="list-circle" />{{ item.task }}
            </li>
          </ul>
        </section>
      </el-col>
    </el-row>
  </section>
</template>

<script lang="ts">
import {
  defineComponent, onBeforeUnmount, onMounted, ref,
} from 'vue';

import Sortable from 'sortablejs';

interface taskType {
  id: number;
  priority: number;
  date: string;
  title: string;
  tag: string;
  qaDate: string;
  name: string,
  badge: string,
  type: number // 1: toto 2: complete
}

interface taskRefType {
  [key: string]: any
}

export default defineComponent({
  name: 'DraggableIndex',

  setup() {
    const taskRef = ref<taskRefType>({});

    const todoRef = ref();
    const completedRef = ref();

    let listSortable:any;

    const activityItemsRef = ref();

    const taskList = ref<taskType[]>([
      {
        id: 1,
        priority: 2,
        date: '2022-09-29',
        title: 'vite配置类似webpack的webpackChunkName',
        tag: 'web',
        qaDate: '2022-09-30',
        name: '小胖',
        badge: 'medium',
        type: 1,
      },
      {
        id: 2,
        priority: 1,
        date: '2022-09-29',
        title: '黑色主题和浅色主题切换',
        tag: 'web',
        qaDate: '2022-09-30',
        name: '大胖',
        badge: 'high',
        type: 1,
      },
      {
        id: 3,
        priority: 0.5,
        date: '2022-09-28',
        title: '全屏退出全屏',
        tag: 'web',
        qaDate: '2022-09-28',
        name: '豪子',
        badge: 'medium',
        type: 2,
      },
      {
        id: 4,
        priority: 0.5,
        date: '2022-09-28',
        title: '新增指引组件示例',
        tag: 'web',
        qaDate: '2022-09-28',
        name: '豪子',
        badge: 'low',
        type: 2,
      }
    ]);
    const todoList = ref<taskType[]>([]);
    const completedList = ref<taskType[]>([]);
    const todoListIds = ref<number[]>([]);
    const completedListIds = ref<number[]>([]);

    const activityList = ref([
      { id: 1, task: 'task1：可拖拽组件开发', classNames: 'bg-success' },
      { id: 2, task: 'task2：监控页面开发', classNames: 'bg-info' },
      { id: 3, task: 'task3：低代码平台开发', classNames: 'bg-warning' },
      { id: 4, task: 'task4：低代码平台开发', classNames: 'bg-dark' },
      { id: 5, task: 'task5：低代码平台开发', classNames: 'bg-danger' },
      { id: 6, task: 'task6：低代码平台开发', classNames: 'bg-success' }
    ]);

    const formatTaskData = () => {
      todoList.value = taskList.value.filter((item:taskType) => item.type === 1);
      completedList.value = taskList.value.filter((item:taskType) => item.type === 2);

      todoListIds.value = todoList.value.map((item:taskType) => item.id);
      completedListIds.value = completedList.value.map((item:taskType) => item.id);
    };

    onMounted(() => {
      formatTaskData();

      taskRef.value.todo = new Sortable(todoRef.value, {
        group: {
          name: 'taskGroup',
          pull: true,
          put: true,
        },
        animation: 150,
        easing: 'cubic-bezier(1, 0, 0, 1)',
        onEnd() {
          todoListIds.value = taskRef.value.todo.toArray();
          completedListIds.value = taskRef.value.completed.toArray();
        },
      });

      taskRef.value.completed = new Sortable(completedRef.value, {
        group: {
          name: 'taskGroup',
          pull: true,
          put: true,
        },
        animation: 150,
        easing: 'cubic-bezier(1, 0, 0, 1)',
        onEnd() {
          completedListIds.value = taskRef.value.completed.toArray();
          todoListIds.value = taskRef.value.todo.toArray();
        },
      });

      listSortable = Sortable.create(activityItemsRef.value, {
        group: {
          name: 'activity',
          pull: false,
          put: false,
        },
      });
    });

    onBeforeUnmount(() => {
      listSortable.destroy();
      taskRef.value.todo.destroy();
      taskRef.value.completed.destroy();
    });

    return {
      todoList,
      todoListIds,
      completedList,
      completedListIds,

      todoRef,
      completedRef,
      activityList,
      activityItemsRef,
    };
  },
});
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  overflow-y: auto;
}

.mt-20 {
  margin-top: 20px;
}

.mt-8 {
  margin-top: 8px;
}

.flex {
  display: flex;
}

.space-between {
  justify-content: space-between;
}

.task {
  border: 1px solid #e3eaef;

  .task-header {
    padding: 10px 12px;
    font-size: 14px;
    background-color: #f1f3fa;
  }

  .task-list {
    box-sizing: border-box;
    min-height: 114px;
    padding: 12px 12px 0;

    .task-list__item {
      position: relative;
      box-sizing: border-box;
      padding: 12px;
      margin-bottom: 12px;
      cursor: move;
      background-color: #fff;
      border: 1px solid #e3eaef;
      border-radius: 8px;

      .top-wrap {
        align-items: center;
        justify-content: space-between;

        .badge {
          padding: 4px 6px;
          color: #fff;
          background-color: var(--#{$namespace}-color-info);
          border-radius: 4px;

          &.high {
            background-color: var(--#{$namespace}-color-danger);
          }

          &.medium {
            background-color: var(--#{$namespace}-color-warning);
          }
        }
      }
    }

    .external-events {
      padding: 8px 10px;
      margin: 10px 0;
      color: #fff;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: move;

      .list-circle {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 10px;
        background-color: #fff;
        border-radius: 50%;
      }

      &.bg-success {
        background-color: #0acf97;
      }

      &.bg-info {
        background-color: #39afd1;
      }

      &.bg-danger {
        background-color: #fa5c7c;
      }

      &.bg-dark {
        background-color: #313a46;
      }

      &.bg-warning {
        background-color: #ffbc00;
      }
    }
  }

  .task-id-info {
    padding: 12px;
  }
}

</style>
